<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}元</h2>
    <button @click="changePrice">更改汽车价格</button>
    <hr />
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <button @click="changeGameName">更改游戏名称</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>

<script lang="ts" setup>
import { ref } from 'vue'
// ref 定义基本类型数据、对象类型数据；reactive 只能定义对象类型数据
let car = ref({
  brand: '斯蒂庞克',
  price: 123456,
})

let games = ref([
  { id: '123456', name: '王者荣耀' },
  { id: '123457', name: '原神' },
])

console.log(car)

function changePrice() {
  car.value.price += 10
}

function changeGameName() {
  games.value[0].name = '流星蝴蝶剑'
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}
button {
  margin: 0 5px;
}
</style>
